<template>
    <div class="dashboard">
      <!-- 顶部标题 -->
      <h1 class="dashboard-title">人事薪酬系统可视化大屏</h1>
  
      <!-- 整体布局采用 Grid 布局 -->
      <div class="dashboard-grid">
  
        <!-- 左侧区域 -->
        <div class="left-area">
          <!-- 人员统计 -->
          <div class="employee-stats panel">
            <h2 class="panel-title">人员统计</h2>
            <div class="employee-count">
              <div v-for="(item, index) in employeeCounts" :key="index" class="employee-item">
                <p class="employee-number">{{ item }}</p>
                <p class="employee-text">在职人员</p>
              </div>
            </div>
          </div>
  
          <!-- 各部门人员统计 -->
          <div class="department-stats panel">
            <h2 class="panel-title">各部门人员统计</h2>
            <div ref="departmentChart" class="chart"></div>
          </div>
  
          <!-- 能力结构统计 -->
          <div class="ability-stats panel">
            <h2 class="panel-title">能力结构统计</h2>
            <div ref="abilityChart" class="chart"></div>
          </div>
        </div>
  
        <!-- 中间区域 -->
        <div class="middle-area">
          <!-- 薪酬信息 -->
          <div class="salary-info panel">
            <div class="salary-box">
              <h2 class="salary-title">本月已发工资</h2>
              <p class="salary-amount">{{ monthlySalary }} 万元</p>
            </div>
            <div class="salary-box">
              <h2 class="salary-title">本季已发工资</h2>
              <p class="salary-amount">{{ quarterlySalary }} 万元</p>
            </div>
            <div class="salary-box">
              <h2 class="salary-title">本年已发工资</h2>
              <p class="salary-amount">{{ annualSalary }} 万元</p>
            </div>
          </div>
  
          <!-- 地图展示 (简易) -->
          <div class="map-container panel">
            <h2 class="panel-title">区域分布</h2>
            <div class="map">
              <!-- 这里可以加入地图组件，或者简单的图片 -->
              <p>地图展示区域</p>
            </div>
          </div>
        </div>
  
        <!-- 右侧区域 -->
        <div class="right-area">
          <!-- 部门人力成本 -->
          <div class="cost-stats panel">
            <h2 class="panel-title">部门人力成本</h2>
            <div ref="costChart" class="chart"></div>
          </div>
  
          <!-- 年龄、司龄、工龄结构 -->
          <div class="age-stats panel">
            <h2 class="panel-title">年龄、司龄、工龄结构</h2>
            <div class="info-boxes">
              <div class="info-box">
                <p class="info-label">平均年龄</p>
                <p class="info-value">{{ averageAge }} 岁</p>
              </div>
              <div class="info-box">
                <p class="info-label">平均司龄</p>
                <p class="info-value">{{ averageTenure }} 年</p>
              </div>
              <div class="info-box">
                <p class="info-label">平均工龄</p>
                <p class="info-value">{{ averageWorkYears }} 年</p>
              </div>
            </div>
            <div ref="ageChart" class="chart"></div>
          </div>
  
          <!-- 性别统计 -->
          <div class="gender-stats panel">
            <h2 class="panel-title">性别统计</h2>
            <div ref="genderChart" class="chart"></div>
          </div>
        </div>
      </div>
    </div>
</template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import * as echarts from 'echarts';
  import type { EChartsOption } from 'echarts';
  
  // 数据 (这里用示例数据，替换成你的实际数据)
  const monthlySalary = ref(38.00);
  const quarterlySalary = ref(138.00);
  const annualSalary = ref(688.00);
  
  const employeeCounts = ref([384, 384, 384, 384, 384, 384]);
  
  const averageAge = ref(37.5);
  const averageTenure = ref(5.9);
  const averageWorkYears = ref(12.65);
  
  const departmentChart = ref(null);
  const costChart = ref(null);
  const ageChart = ref(null);
  const abilityChart = ref(null);
  const genderChart = ref(null);
  
  
  onMounted(() => {
    // 确保 DOM 已经挂载
    if (departmentChart.value) {
      renderDepartmentChart();
    }
    if (costChart.value) {
      renderCostChart();
    }
    if(ageChart.value){
      renderAgeChart();
    }
    if(abilityChart.value){
      renderAbilityChart();
    }
     if(genderChart.value){
      renderGenderChart();
    }
  });
  
  // 各部门人员统计 图表配置 (水平柱状图)
  const renderDepartmentChart = () => {
    const chartDom = departmentChart.value as HTMLElement;
    const myChart = echarts.init(chartDom);
  
    const option: EChartsOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: ['党群监察部', '科技教育中心', '表述艺术中心', '视觉艺术中心', '校区管理部', '实践教育中心', '财务部', '人力资源部', '教学管理部', '办公室'],
      },
      series: [
        {
          name: '人数',
          type: 'bar',
          data: [10, 15, 8, 12, 20, 18, 25, 30, 16, 22], // 示例数据，替换为你的数据
        },
      ],
      color: '#007bff' // 柱状图颜色
    };
  
    myChart.setOption(option);
  };
  
  // 部门人力成本 图表配置 (水平柱状图)
  const renderCostChart = () => {
    const chartDom = costChart.value as HTMLElement;
    const myChart = echarts.init(chartDom);
  
    const option: EChartsOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: ['党群监察部', '科技教育中心', '表述艺术中心', '视觉艺术中心', '校区管理部', '实践教育中心', '财务部', '人力资源部', '教学管理部', '办公室'],
      },
      series: [
        {
          name: '成本',
          type: 'bar',
          data: [35, 35, 35, 35, 35, 35, 35, 35, 35, 35], // 示例数据，替换为你的数据
        },
      ],
      color: '#28a745' // 柱状图颜色
    };
  
    myChart.setOption(option);
  };
  
  // 年龄、司龄、工龄结构 图表配置 (柱状图)
  const renderAgeChart = () => {
    const chartDom = ageChart.value as HTMLElement;
    const myChart = echarts.init(chartDom);
  
     const option: EChartsOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['26岁以下', '26-30岁', '31-35岁', '35-40岁', '41-45岁', '46-50岁', '50岁以上'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '人数',
          type: 'bar',
          data: [100, 120, 150, 200, 180, 100, 50], // 示例数据，替换为你的数据
        },
      ],
       color: '#dc3545' // 柱状图颜色
    };
  
    myChart.setOption(option);
  };
  
  // 能力结构统计 图表配置 (饼图)
  const renderAbilityChart = () => {
    const chartDom = abilityChart.value as HTMLElement;
    const myChart = echarts.init(chartDom);
  
     const option: EChartsOption = {
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: '学历',
          type: 'pie',
          radius: '70%',
          data: [
            { value: 54.82, name: '本科' },
            { value: 29.82, name: '本科以上' },
            { value: 15.36, name: '本科以下' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
          color: ['#ffc107', '#17a2b8', '#6c757d'] // 饼图颜色
        },
      ],
    };
  
    myChart.setOption(option);
  };
  
  // 性别统计 图表配置 (饼图)
  const renderGenderChart = () => {
    const chartDom = genderChart.value as HTMLElement;
    const myChart = echarts.init(chartDom);
  
     const option: EChartsOption = {
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: '性别',
          type: 'pie',
          radius: '70%',
          data: [
            { value: 67, name: '女性职员' },
            { value: 33, name: '男性职员' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
          color: ['#e83e8c', '#007bff'] // 饼图颜色
        },
      ],
    };
  
    myChart.setOption(option);
  };
  
  </script>
  
  <style lang="less" scoped>
  .dashboard {
    position: fixed; // 关键：固定定位，占满屏幕
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f8f9fa;
    color: #495057;
    padding: 20px;
    overflow: auto; // 如果内容超出屏幕，允许滚动
  
    .dashboard-title {
      text-align: center;
      margin-bottom: 20px;
      color: #343a40;
    }
  
    .dashboard-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr; /* 三列布局 */
      grid-gap: 20px;
  
      /* 面板样式 */
      .panel {
        background-color: #fff;
        border-radius: 5px;
        padding: 15px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  
        .panel-title {
          font-size: 1.2rem;
          margin-bottom: 10px;
          color: #343a40;
        }
      }
  
      /* 左侧区域样式 */
      .left-area {
        /* 可以根据需要添加样式 */
      }
  
      /* 中间区域样式 */
      .middle-area {
        /* 可以根据需要添加样式 */
      }
  
      /* 右侧区域样式 */
      .right-area {
        /* 可以根据需要添加样式 */
      }
  
      /* 人员统计样式 */
      .employee-stats {
      }
  
      .employee-count {
        display: flex;
        justify-content: space-around;
        align-items: center;
  
        .employee-item {
          text-align: center;
  
          .employee-number {
            font-size: 1.5rem;
            font-weight: bold;
            color: #007bff;
          }
  
          .employee-text {
            color: #6c757d;
          }
        }
      }
  
      /* 薪酬信息样式 */
      .salary-info {
        display: flex;
        justify-content: space-around;
  
        .salary-box {
          text-align: center;
  
          .salary-title {
            font-size: 1rem;
            color: #6c757d;
          }
  
          .salary-amount {
            font-size: 1.3rem;
            font-weight: bold;
            color: #28a745;
          }
        }
      }
  
      /* 地图容器样式 */
      .map-container {
      }
  
      .map {
        height: 200px; /* 根据需要调整高度 */
        border: 1px solid #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #6c757d;
      }
  
      /* 图表样式 */
      .chart {
        height: 300px; /* 根据需要调整高度 */
      }
  
      /* 年龄、司龄、工龄样式 */
      .age-stats {
      }
  
      .info-boxes {
        display: flex;
        justify-content: space-around;
        margin-bottom: 10px;
  
        .info-box {
          text-align: center;
  
          .info-label {
            color: #6c757d;
          }
  
          .info-value {
            font-size: 1.2rem;
            font-weight: bold;
            color: #17a2b8;
          }
        }
      }
  
      /* 性别统计样式 */
      .gender-stats {
      }
    }
  }
  </style>